<template>

  <table-tools v-if="formData?.agentProductStatus !=='-2'">
    <template #left>
      <el-button v-auth="{v:['crm:marketing:matching:regional:addTerminal']}" size="mini" type="primary"
        @click="handlNew">添加配送终端
      </el-button>
    </template>
  </table-tools>

  <el-table :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header" size="small"
    @row-click="aloneClick">

    <el-table-column align="center" label="序号" type="index" width="50" />

    <el-table-column header-align="center" label="终端名称" prop="terminalName" show-overflow-tooltip />

    <el-table-column header-align="center" label="终端所在地区">
      <template #default="{row}">
        {{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}
      </template>
    </el-table-column>

    <el-table-column align="center" label="终端类型">
      <template #default="{row}">
        {{ getLabel('app_mode', row.terminalType) }}
      </template>
    </el-table-column>

    <el-table-column align="center" label="终端价(元)" prop="terminalPrice" />

    <el-table-column align="center" label="配送商">
      <template #default="{row}">
        <distributors-view v-if="row.distributeContractDetails && row.distributeContractDetails.length" :boole="false"
          :booleType="false" :datas="row.distributeContractDetails" :unit="formData?.sellUnit" />
      </template>
    </el-table-column>

    <el-table-column align="center" label="状态">
      <template #default="{row}">
        <div v-if="row.flowStatus !=='DOING'" style="line-height: 20px;">
          {{ getLabel('fine_terminal', row.devStatus) }}
        </div>
        <div v-if="row.flowStatus ==='DOING'" class="flow-status-color" style="line-height: 20px;">
          {{ getLabel('approval_result', row.flowStatus) }}
        </div>
        <div class="flow-status-color" style="line-height: 20px; " v-if="row.flowStatus !=='DOING'">
          {{ distributeStatus(row.distributeContractDetails) }}
        </div>
      </template>
    </el-table-column>

    <el-table-column align="center" label="操作">
      <template #default="{row}">
        <el-button v-auth="{v:['crm:marketing:matching:regional:setDistribution'],
          bool:row.devStatus === '2' || row.devStatus === '4' || row.devStatus === '5'}" type="text"
          @click="handlSet(row)">
          设置配送信息
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.page" :total="total"
    style="display: flex; justify-content: flex-end" @pagination="handlList" />

  <detail-drawer ref="detailDrawer" :size-width="1000" custom-title>
    <template #title>
      <div style="display: flex;justify-content: space-between;align-items: center">
        <div style="width: 70%">
          <span style="padding-right: 15px">{{ rowData?.terminalName }} </span>
          <el-tag v-if="rowData?.flowStatus !=='DOING'" size="small" style="padding-right: 15px" type="warning">
            {{ getLabel('fine_terminal', rowData.devStatus) }}
          </el-tag>
          <el-tag v-if="rowData?.flowStatus ==='DOING'" size="small" style="padding-right: 15px" type="warning">
            {{ getLabel('approval_result', rowData.flowStatus) }}
          </el-tag>
        </div>
        <div v-if="rowData" style="width: 30%;text-align: right">
          <el-button v-auth="{v:['crm:marketing:matching:regional:setDistribution'],
          bool:rowData.devStatus === '2' || rowData.devStatus === '4' || rowData.devStatus === '5'}" size="mini"
            type="primary" @click="handlSet(rowData)">
            设置配送信息
          </el-button>
        </div>
      </div>
    </template>
    <template #contents>
      <div class="drawer-content">
        <div class="history-list">
          <terminal-details :id="rowData.id" ref="terminalDrawer" />
        </div>
      </div>
    </template>
  </detail-drawer>

  <!--添加配送终端-->
  <associated ref="associatedRef" :tradePrice="formData?.tradePrice" @successServive="successServive" />

  <!--设置配送信息-->
  <setiDelivery ref="setiDeliveryRef" :agentProdoductId="formData?.id" :booleDis="false" :region="formData?.region"
    @distributeSuccsess="distributeSuccsess" />
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  props: {
    formData: {
      type: Object,
      default: {},
    },
  },
  components: {
    terminalDetails: defineAsyncComponent(() =>
      import("./terminalDetails.vue")
    ),
    associated: defineAsyncComponent(() => import("./associated.vue")),
    setiDelivery: defineAsyncComponent(() =>
      import("@CRM/views/marketing/customer/terminal/modules/setiDelivery.vue")
    ),
  },
  setup(props, context) {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      tableData: [],
      total: 0,
      detailDrawer: null,
      terminalDrawer: null,
      queryParams: {
        pageSize: 20,
        page: 1,
        agentProductId: Number(route.query.id),
      },
      rowData: null,
      associatedRef: null,
      setiDeliveryRef: null,
    });

    const handlList = () => {
      api.marketingMatching
        .REGIONAL_DISTRIBUTION_TERMINAL_LIST(data.queryParams)
        .then((res) => {
          if (res.code === 0) {
            data.tableData = res.data.list || [];
            data.total = res.data.total;
          }
        });
    };

    const successServive = () => {
      handlList();
    };

    // 获取配送信息审核中
    const distributeStatus = (val) => {
      let a = "";
      if (val && val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          if (val[i].flowStatus === "DOING") {
            a = "配送信息审核中";
            break;
          }
        }
      }
      return a;
    };

    const aloneClick = (row, column, event) => {
      data.rowData = row;
      if (column.label === "操作") {
        return;
      }
      data.detailDrawer.open();
    };

    const cellStyle = () => {
      return "cursor:pointer;";
    };

    const handlNew = () => {
      data.associatedRef.open(props.formData);
    };

    const handlSet = (val) => {
      data.setiDeliveryRef.open(val, val.id);
    };

    const distributeSuccsess = () => {
      handlList();
    };

    onMounted(() => {
      handlList();
    });

    return {
      ...toRefs(data),
      handlList,
      aloneClick,
      cellStyle,
      handlSet,
      handlNew,
      distributeStatus,
      successServive,
      distributeSuccsess,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>